.x-image {
	position: relative;
	display: inline-block;
	width:100%;
	height: 100%;

	&--round {
		overflow: hidden;
		border-radius: 50%;

		img {
			border-radius: inherit;
		}
	}

	&__img,
	&__error,
	&__loading {
		width: 100%;
		height: 100%;
	}

	&__error,
	&__loading {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: $image-placeholder-text-color;
		font-size: $image-placeholder-font-size;
		background-color: $image-placeholder-background-color;
	}

	&__loading-icon {
		font-size: $image-loading-icon-size;
	}

	&__error-icon {
		font-size: $image-error-icon-size;
	}
}
